<template>
    <div class="container">
        <el-breadcrumb separator-icon="RightOutlined" :info="execItemList">
            <el-breadcrumb-item v-for="item in itemList" :key="item.index" :to="{ path: item.routeTo }" :style="execItemStyle">
                {{ item.title }}
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script name="BreadCrumbComponent" setup lang="ts">
import {doThirdServiceValue} from "@/utils/lowcode/thirdService";
import {computed, defineProps, ref} from "vue";

let props = defineProps(['propJson', 'commonParam']);

let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let itemList = ref([]);

let execItemStyle = computed(() => {
    let resStyle = "";
    if (propJson.value.fontSize !== "") {
        resStyle += "font-size: " + propJson.value.fontSize + ";";
    }
    return resStyle;
})

let execItemList = computed(async () => {
    if (propJson.value.editFlag) {
        return;
    }
    await doThirdServiceValue(propJson.value.breadCrumbValue, commonParam.value, execItemThen, execItemCatch, null)
})

function execItemThen(resValue) {
    if (!resValue && propJson.value.editFlag) {
        itemList.value = [
            {
                title: "无内容",
                routeTo: ""
            }
        ]
        return;
    }
    if (Array.isArray(resValue)) {
        itemList.value = resValue
    } else if (typeof resValue === "string") {
        itemList.value = [
            {
                title: resValue,
                routeTo: resValue
            }
        ]
    }
}

function execItemCatch(resValue) {

}
</script>

<style scoped lang="less">

</style>